<template>
    <div>
        <h2 style="text-align: center;">借款信息修改页面</h2>
        <table class="table-bordered" border="1">
            <tr>
                <td>借款款项名称</td>
                <td>
                    <input type="text" v-model="info.B_Name" placeholder="请输入借款款项名称">
                </td>
            </tr>
    
            <tr>
                <td>借款最高金额</td>
                <td>
                    <input type="text" v-model="info.B_MaxMoney" placeholder="请输入借款最高金额">
                </td>
            </tr>
    
            <tr>
                <td>借款最高年限</td>
                <td>
                    <input type="text" v-model="info.B_Year" placeholder="请输入借款最高年限">
                </td>
            </tr>
    
            <tr>
                <td>利息</td>
                <td>
                    <select v-model="info.BI_Id">
                        <option value="0">--请选择--</option>
                        <option v-for="item in selinfo" :key="item.BI_Id" :value="item.BI_Id">{{ item.BI_Year }}年利息{{ item.BI_Interest }}%</option>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>借款款项简介</td>
                <td>
                    <textarea cols="20" rows="3" v-model="info.B_Info" placeholder="请输入借款款项简介"></textarea>
                </td>
            </tr>
    
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="修改" @click="UpdateBorrow" class="btn btn-success">
                </td>
            </tr>
        </table>
    </div>
</template>
    
<script setup lang="ts">
    import axios from 'axios';
    import {ref,onMounted} from 'vue';
    import { useRoute,useRouter } from 'vue-router';

    const route=useRoute();
    const router=useRouter();
    
    //创建响应式数据 用于下拉框
    const selinfo=ref([{
        BI_Id:0,
        BI_Year:0,
        BI_Interest:0
    }])
    
    //创建响应式数据
    const info=ref({
        B_Name:'',
        B_MaxMoney:0,
        B_Year:0,
        B_Info:'',
        BI_Id:0
    })
    
    //创建生命周期函数钩
    onMounted(()=>{
        ShowInterest()
        SingleBorrow()
    })
    
    //加载数据
    const ShowInterest=()=>{
        axios.get("https://localhost:44321/api/Borrows/ShowBInterest")
        .then(res=>{
            selinfo.value=res.data
        })
        .catch(error=>{
            console.log(error);
        })
    }
    
    //反填
    const SingleBorrow=()=>{
        axios.get('https://localhost:44321/api/Borrows/GetBorrowMoney',{
            params:{
                Bid:route.params.Bid
            }
        })
        .then(res => {
            info.value = res.data[0];
        })
        .catch(err => {
            console.log(err)
        })
    }

    //完成添加
    const UpdateBorrow=()=>{
        axios.put('https://localhost:44321/api/Borrows/UpdateBorrowMoney',
            {
                B_Id:route.params.Bid,
                B_Name:info.value.B_Name,
                B_MaxMoney:info.value.B_MaxMoney,
                B_Year:info.value.B_Year,
                B_Info:info.value.B_Info,
                BI_Id:info.value.BI_Id
            }
        )
        .then(res=>{
            if(res.data>0){
                alert('修改成功');
                router.push('/ShowBorrowMoney')
            }
            else{
                alert('修改失败');
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
</script>